<template>
	<view class="new_wrap animated fadeInLeft">
		<view class="avtor">
			<view class="left_pic">
				<image mode="widthFix" :src="item.userpic"></image>
				<text class="user_name">{{ item.username }}</text>
			</view>
			<view class="r_add"  @click="guanzhu"  v-if="!item.isguanzhu">
				<text class="add">+关注</text>
				<icon class="remove iconfont icon-x"></icon>
			</view>
		</view>
		<view class="swiper_wrap" @click="goToNav">
			<view class="text">{{ item.title }}</view>
			<view class="swiper-box"><image :src="item.titlepic"></image></view>
			<view class="bd_comment">
				<view class="left_love">
					<view class="love" @tap="caozuo('ding')"> 
						<icon :class="{ changeColor: (item.infonum.index===1) }" class="iconfont icon-xiaolian1"></icon>
						<text>{{ item.infonum.dingnum }}</text>
					</view>
					<view class="dislike" @tap="caozuo('cai')">
						<icon :class="{ changeColor:  (item.infonum.index===2) }" class="iconfont icon-kulian"></icon>
						<text>{{ item.infonum.cainum }}</text>
					</view>
				</view>
				<view class="r_transmit">
					<view class="comment">
						<icon class="iconfont icon-xinxi"></icon>
						<text>{{ item.commentnum }}</text>
					</view>
					<view class="tran">
						<icon class="iconfont icon-forward-null"></icon>
						<text>{{ item.sharenum }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		itemList: Object,
		index: Number
	},
	data() {
		return {
			// 初始化数据
			item:this.itemList
		}; 
	},
	methods: {
		// 点击关注
		guanzhu(){
			this.item.isguanzhu=true
			uni.showToast({
				title:"关注成功"
			})
		},
		// 跳转页面
		goToNav(){
			uni.navigateTo({
				url:'../../pages/detail/detail?detailList='+JSON.stringify(this.itemList)
        
			})
		},
		// 顶踩
		caozuo(type) {
			switch (type) {
				case 'ding':
					if (this.item.infonum.index == 1) {
						return;
					}
					this.item.infonum.dingnum++;
					if (this.item.infonum.index == 2) {
						this.item.infonum.cainum--;
					}
					this.item.infonum.index = 1;
					break;
				case 'cai':
					if (this.item.infonum.index == 2) {
						return;
					}
					this.item.infonum.cainum++;
					if (this.item.infonum.index == 1) {
						this.item.infonum.dingnum--;
					}
					this.item.infonum.index = 2;
					break;
			}
		}
	}
};
</script>

<style lang="less">
.new_wrap {
	padding: 10rpx 20rpx;
	.avtor {
		display: flex;
		justify-content: space-between;
		margin: 15rpx 0;
		.left_pic {
			display: flex;
			align-items: center;
			.user_name {
				padding-left: 10rpx;
				font-weight: 550;
			}
			image {
				border-radius: 50%;
				width: 100rpx;
			}
		}
		.r_add {
			display: flex;
			align-items: center;
			.add {
				height: 50rpx;
				width: 100rpx;
				background-color: #f4f4f4;
				text-align: center;
				line-height: 50rpx;
				border-radius: 4rpx;
			}
			.remove {
				font-size: 20rpx;
				color: #d6d6d6;
				padding-left: 15rpx;
				display: flex;
				align-items: center;
			}
		}
	}
	.swiper_wrap {
		.swiper-box {
			image {
				width: 100%;
				border-radius: 20rpx;
				margin: 15rpx 0;
			}
		}
		.bd_comment {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 40rpx;
			.left_love {
				color: #d5d5d5;
				display: flex;
				justify-content: flex-start;
				.love {
					text {
						margin: 0 17rpx;
					}
				}
				.changeColor {
					color: yellow;
				}
				.dislike {
					icon {
						margin-right: 17rpx;
					}
				}
			}
			.r_transmit {
				display: flex;
				color: #d6d6d6;
				.comment {
					text {
						margin: 0 15rpx;
					}
				}
				.tran {
					text {
						margin-left: 15rpx;
					}
				}
			}
		}
	}
}
</style>
